<!-- 申请参与跨店满减活动历史记录 -->
<template>
  <el-card>
    <div class="table">
      <!-- 表格 -->
      <el-table v-loading="loading" :data="activityRequestList" style="width: 100%">
        <el-table-column v-for="item in activityTableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
          :width="item.width" :sortable="item.sortable" />

        <!-- 申请状态 -->
        <el-table-column :filters="[{ text: '已通过', value: 1 }, { text: '申请中', value: 0 }, { text: '不通过', value: 0 }]"
          prop="status" label="申请状态" width="95">
          <template v-slot="scope">
            <el-tag size="small" v-if="scope.row.status === 0" type="warning">申请中</el-tag>
            <el-tag size="small" v-else-if="scope.row.status === 1" type="success">已通过</el-tag>
            <el-tag size="small" v-else-if="scope.row.status === 2" type="danger">不通过</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="config.total" class="pager"
        @current-change="changePage" :page-size="config.size" />
    </div>
  </el-card>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue';
import { useStore } from 'vuex'

const store = useStore()
const { proxy } = getCurrentInstance();
const activityRequestList = ref([]);
const loading = ref(false);  // 控制表格加载遮罩窗是否出现

const activityTableLabel = reactive([
  {
    prop: "storeParticipateInActivityRequestId",
    label: "参加活动申请ID",
    width: 200,
    sortable: true,
  },
  {
    prop: "activityId",
    label: "活动ID",
    width: 200,
    sortable: true,
  },
  {
    prop: "storeId",
    label: "商店ID",
    width: 200,
    sortable: true,
  },
  {
    prop: "initiateTime",
    label: "发起时间",
    width: 200,
    sortable: true,
  },
  {
    prop: "processTime",
    label: "处理时间",
    width: 200,
    sortable: true,
  },
  {
    prop: "info",
    label: "审核意见",
  },
]);

const config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
})

const getActivityRequestList = async (manageStoreId) => {
  // 发起请求
  let res = await proxy.$api.activity.getPageOfActivityRequestOfStore(manageStoreId, {
    current: config.current,
    size: config.size,
  });
  // 更新表格数据
  activityRequestList.value = res.data.activityRequestList;
  config.total = res.data.total;
}

/**
 * 翻页
 * @param {number} page 目标页码
 */
const changePage = async (page) => {
  loading.value = true;
  // 更新当前页码
  config.current = page
  await getActivityRequestList(store.state.store.manageStoreId)
  loading.value = false;
}

onMounted(async () => {
  loading.value = true;
  await getActivityRequestList(store.state.store.manageStoreId);
  loading.value = false;
});
</script>

<style lang="less" scoped>
.table {

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>